<template>
	<view class="emailPage">
		<input type="text" v-model="email" placeholder="请输入你要绑定的邮箱" placeholder-class="placeholder" />
		<input type="text" v-model="password" placeholder="请输入密码" placeholder-class="placeholder" />
		<button :disabled="disabled" class="bindEmail" hover-start-time=15 hover-stay-time=200 hover-class="bgColoroutBindEmail"
		 @tap="bindEmail">绑定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email: void 0,
				password: void 0
			};
		},
		computed: {
			disabled() {
				if (this.email && this.password) {
					return false;
				};
				return true;
			},
		},
		methods: {
			// 验证邮箱格式
			check() {
				let reg = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
				if (reg.test(this.email)) return true;
				uni.showToast({
					title: "邮箱格式不正确",
					icon: "none"
				});
			},
			bindEmail() {
				if (this.check()) {
					uni.showToast({
						title: "修改邮箱成功",
						icon: "none"
					});
				};
			},
		},
	}
</script>

<style lang="scss">
	.emailPage {
		>input {
			padding: 20rpx 25rpx;
			font-size: 1.1rem;
			color: #909090;
			border-bottom: 1rpx solid #E5E5E5;
		}
	}

	.placeholder {
		color: #C7C7C7;
	}

	.bindEmail {
		letter-spacing: 10rpx;
		border-radius: 16rpx !important;
		margin: 150rpx 30rpx 0rpx;
		font-size: 1.1rem !important;
		background-color: #F6F6F6;
		color: #A7A5A3;
		border: 2rpx solid #E9E9E9 !important;
	}

	.bgColoroutBindEmail {
		border: 2rpx solid #E9E9E9 !important;
		background-color: #E5E5E5 !important;
	}
</style>
